<template>
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    :visible.sync="dialogFormVisible"
    :before-close="close"
    :title="title"
    width="800px"
    :top="'10vh'"
  >
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="标题" prop="title" style="width: 100%">
            <el-input v-model="form.title" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否链接" prop="isOpenUrl">
            <el-radio-group v-model="form.isOpenUrl">
              <el-radio
                v-for="item in status"
                :key="item.id"
                :label="item.value"
              >{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="form.isOpenUrl === true" :span="24">
          <el-form-item label="链接地址" prop="url">
            <el-input v-model="form.url" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="优先级" prop="px">
            <el-input-number v-model="form.px" :min="1" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="展现平台">
            <el-checkbox-group v-model="zxpt" size="small" style="width: 400px">
              <el-checkbox v-for="item in dict.platform_type" :key="item.id" :border="true" :label="item.value">
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="简介" prop="contentValue">
            <el-input
              v-model="form.contentValue"
              type="textarea"
              maxlength="100"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="轮播图" prop="carouselImage">
            <el-upload
              class="avatar-uploader schoolBottomImage"
              :action="baseUrl+'rest/api/config/v1/file/custom/upload?type=8&fs=1'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="form.carouselImage" :src="form.carouselImage" class="school-bak-image">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
            <el-input v-model="form.carouselImage" type="hidden" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="dqzt">
            <el-radio-group v-model="form.dqzt">
              <el-radio
                v-for="item in status"
                :key="item.id"
                :label="item.value"
              >{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="close">取消</el-button>
      <el-button :loading="loading" type="primary" @click="save('form')">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { saveCarousel, updateCarousel } from '@/api/carousel/index'
export default {
  name: 'CarouselEntity',
  dicts: ['platform_type'],
  data() {
    return {
      title: '新增',
      cropperName: 'cropperName',
      autoCropHeight: 50,
      autoCropWidth: 50,
      fixedNumber: [1, 1],
      imageDialog: false,
      loading: false,
      dialogFormVisible: false,
      baseUrl: process.env.VUE_APP_BASE_API,
      status: [{ id: 0, value: false, label: '否' },
        { id: 1, value: true, label: '是' }],
      zxpt: [], // 展现平台
      form: {
        title: '',
        isOpenUrl: false,
        contentValue: '',
        zxpt: '',
        dqzt: true,
        carouselImage: ''
      },
      rules: {
        isOpenUrl: [{ required: true, message: '请选择是否链接', trigger: 'change' }],
        px: [{ required: true, message: '排序不能为空！', trigger: 'blur' }],
        carouselImage: [{ required: true, message: '轮播图不能为空', trigger: 'change' }]
      }
    }
  },
  watch: {
    zxpt: {
      handler(newName, oldName) { // 值发生变化时
        this.form.zxpt = newName.toString()
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: true // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    openEntity(data) {
      if (undefined === data || data === null) {
        this.title = '新增'
        this.dialogFormVisible = true
      } else {
        this.title = '编辑'
        this.form = Object.assign({}, data)
        if (undefined !== data.zxpt && data.zxpt !== null) {
          this.zxpt = data.zxpt.split(',')
        }
        this.dialogFormVisible = true
      }
    },
    close() {
      this.$refs['form'].resetFields()
      this.dialogFormVisible = false
      this.$emit('fetch-data')
    },
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form.id !== null && undefined !== this.form.id) {
            updateCarousel(this.form).then(res => {
              this.$message.success('更新成功！')
              this.close()
            }).catch(() => {
              this.$message.error('更新失败！')
            })
          } else {
            saveCarousel(this.form).then(res => {
              this.$message.success('保存成功！')
              this.close()
            }).catch(() => {
              this.$message.error('保存失败！')
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    beforeAvatarUpload(file) {

    },
    handleAvatarSuccess(res) {
      const { data } = res
      this.form.carouselImage = data.url
    }
  }
}
</script>

<style scoped>
.schoolBottomImage {
  width: 100%;
  height: 250px;
  border: 1px dashed #9b9b9b;
  border-radius: 4px;
  text-align: center;
  line-height: 250px;
  font-size: 34px;
}
.school-bak-image {
  width: 100%;
  height: 250px;
}
.el-upload {
  width: 100%;
  height: 250px;
}
</style>
